<div class="box data_box" style="background: #ffffff">
    <h3 style="margin-left: 30px;padding-bottom: 10px;" >
        账号管理
        <div class="input-group col-md-3" style="float: right;">

            <input type="text" class="form-control"placeholder="请输入字段名" v-model = "key"/>

            <span class="input-group-btn">

               <button class="btn btn-info btn-search" @click="getListByKey">查找</button>

               <button class="btn btn-info btn-search" style="margin-left:3px" @click="addUser">添加用户</button>

            </span>

        </div>
<!--        <button type="button" class="btn btn-default" style="float: right; margin-right: 20px;" @click="addUser" >添加用户</button>-->
    </h3>
    <div class="box-body table-responsive no-padding">
        <table class="table table-bordered ">
            <tr style="background: #5bc0de">
                <th>ID</th>
                <th>账号</th>
                <th>昵称</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>状态</th>
                <th class="col-xs-3">权限</th>
                <th>操作</th>
            </tr>
            <tbody id="tbodyId">
            <tr v-for ="item in user_list">
                <td>{{item.id }}</td>
                <td>{{item.username }}</td>
                <td>{{item.nickname }}</td>
                <td>{{item.phone }}</td>
                <td>{{item.email }}</td>
                <td>{{item.status | changeStatus }}</td>
                <td>{{item.role }}</td>
                <td>
                    <button type="button" class="btn btn-success btn-xs"  @click = "userChange(item)" >修改</button>
                    <button v-if ="item.status == '0' " type="button" class="btn btn-warning btn-xs" @click ="userStart(item)" >启用</button>
                    <button v-if ="item.status == '1' " type="button" class="btn btn-danger btn-xs dept-stop"  @click ="userStop(item)" >停用</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 部门添加框 -->
    <div class="modal fade" id="add-user-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">{{ userModaltitle }}</h4>
                </div>
                <div class="modal-body">
                    <!-- 表单内容 -->
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input v-if="userItem.id == null" type="text" class="form-control dept-name" placeholder="用户名" v-model ="userItem.username" >
                                <input v-else= type="text" class="form-control dept-name" placeholder="部门名称"  v-model ="userItem.username">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control dept-name" placeholder="密码"  v-model ="userItem.password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">昵称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control dept-name" placeholder="昵称"  v-model ="userItem.nickname">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">电话</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control dept-name" placeholder="电话"  v-model ="userItem.phone">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control dept-name" placeholder="邮箱"  v-model ="userItem.email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">权限</label>
                            <div class="col-sm-10">
                                <!-- 从该部门人员下查询，暂放 -->
                                <div class="checkbox">
                                    <label v-for="(item,index) in dept_list">
                                        <input type="checkbox" :value="item.id" v-model="role" />{{item.deptname}}
                                    </label>
                                </div>

                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="saveUser">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.min.js"></script>
<script type="text/javascript">
    // 文档就绪函数
    $(function(){
        getList();
        getDeptList();
         function getList(key){
             // let params= {
             //     key : key
             // }
             // Vue.http.post('/user/list',params).then(function(res) {
             //     userVue._data.user_list = res.data.data;
             // });

             let params = {
                 key : key
             }
             $.post("/user/list",params,function(res){
                 if(res.state == 1){
                     userVue._data.user_list = res.data
                     // console.log(this.user_list);
                     // alert("数据获取成功");
                 }else{
                     alert("数据获取失败");
                 }
             });

         }
         function getDeptList(){
             Vue.http.get('/dept/list').then(function(res) {
                 userVue._data.dept_list = res.data.data;
             });
         }

        var userVue = new Vue({
            el : ".data_box" ,
            data : {
                dept_list : [],
                user_list : [],
                role : [],
                userModaltitle : "",
                userItem : {},
                isChecked : true,
                key : ""
            },filters : {
                // isNull : function(str){
                //     if(str == null){
                //         return '暂无';
                //     }else{
                //         return str;
                //     }
                // },
                changeStatus : function(str){
                    if(str == "0"){
                        return "停用"
                    }else if(str == "1"){
                        return "正常运行"
                    }
                },
                // subTime : function (str) {
                //     if(str != null){
                //         return str.substr(0,10);
                //     } else{
                //         return '暂无';
                //     }
                //
                // }
            },
            mounted(){
                // this.getList();
            },
            methods : {
                getListByKey : function (){
                    // console.log(key);

                    getList(this.key);
                },
                addUser : function(){
                    this.role = [];
                    this.userModaltitle="部门添加";
                    this.userItem = {};
                    $("#add-user-modal").modal('show');
                },
                userChange : function (item){
                    this.userModaltitle="用户修改";
                    this.userItem = item;
                    let roles = item.role;
                    roles = roles.replace(new RegExp("ROLE_","gm"),"");
                    this.role = roles.split(",");
                    $("#add-user-modal").modal('show');
                },
                userStart : function(item){
                    let params = {
                        id : item.id,
                        status :  1,
                    }
                    $.post("/user/update",params,function(res){
                        if(res.state == 1){
                            // window.location.reload();
                            item.status = 1;
                            alert("启用成功");

                        }else{
                            alert("启用失败");
                        }
                    });

                //
                },
                userStop : function(item){
                //     // 停用
                    let params = {
                        id : item.id,
                        status :  0,
                    }
                    $.post("/user/update",params,function(res){
                        // window.location.reload();
                        if(res.state == 1){
                            item.status = 0;
                            alert("停用成功");
                        }else{
                            alert("停用失败");
                        }
                    });
                //
                },
                saveUser : function(){

                //     // 判断新增还是修改
                //     console.log(this.role);
                    let role = "";
                    for (let item in this.role) {
                        role += "ROLE_" + this.role[item] + ",";
                    }
                    if (role != "") {
                        role = role.substring(0, role.length - 1);
                    }
                    // console.log(role);
                    let params = {
                        id : this.userItem.id,
                        username : this.userItem.username,
                        password : this.userItem.password,
                        nickname  : this.userItem.nickname,
                        phone : this.userItem.phone,
                        email :  this.userItem.email,
                        role : role,
                    }
                  /*  var  params = this.deptItem;*/
                    if(this.userItem.id != null){
                        // 修改
                    /*    this.$http.post("/dept/updata",params).then(function (res) {
                            if(res.data.status == 1){
                                alert("修改成功");
                            }else{
                                alert("修改失败");
                            }

                        });*/ //vue的http请求参数格式默认是(view)对象，后台springmvc接受只能用formData（表单对象）,可以修改，但是麻烦
                        $.post("/user/update",params,function(res){
                            if(res.state == 1){
                                $("#add-user-modal").modal('hide');
                                alert("修改成功");
                                getList();
                            }else{
                                $("#add-user-modal").modal('hide');
                                alert("修改失败");
                            }
                        });
                    }else{
                        // 新增
                        $.post("/user/add",params,function(res){
                            if(res.state == 1){
                                $("#add-user-modal").modal('hide');
                                alert("添加成功");
                                getList();
                            }else{
                                $("#add-user-modal").modal('hide');
                                alert("添加失败");
                            }
                        });
                    }

                }

            }
        });
    })


</script>